<template>
	<div>
		<div @click="selectShapes('line')">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
				<line x1="0" y1="18" x2="40" y2="18"  :stroke="modelValue=='line' ? 'rgb(140, 197, 255)' : 'gray'" stroke-width="2"></line>
			</svg>
		</div>
		<div @click="selectShapes('lineArrow')">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
				<line x1="0" y1="18" x2="40" y2="18"  :stroke="modelValue=='lineArrow' ? 'rgb(140, 197, 255)' : 'gray'" stroke-width="2" marker-end="url(#arrow)"></line>
			</svg>
		</div>
		<div @click="selectShapes('rect')">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
				<rect x="0" y="3" width="40" height="30" fill="#FFFFFF"  :stroke="modelValue=='rect' ? 'rgb(140, 197, 255)' : 'gray'" stroke-width="2"></rect>
			</svg>
		</div>
		<div @click="selectShapes('prismatics')">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
				<path d="M0 20 L20 0 L40 20 L20 40 L0 20" width="40" height="30" fill="#FFFFFF"  :stroke="modelValue=='prismatics' ? 'rgb(140, 197, 255)' : 'gray'" stroke-width="2"></path>
			</svg>
		</div>
		<!-- <div @click="selectShapes('rhomboid')">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
				<path d="M0 30 L10 10 L40 10 L30 30 L0 30" width="40" height="30" fill="#FFFFFF"  :stroke="modelValue=='rhomboid' ? 'rgb(140, 197, 255)' : 'gray'" stroke-width="2"></path>
			</svg>
		</div> -->
		<div @click="selectShapes('triangle')">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
				<path d="M0 30 L20 5 L40 30 L0 30" width="40" height="30" fill="#FFFFFF"  :stroke="modelValue=='triangle' ? 'rgb(140, 197, 255)' : 'gray'" stroke-width="2"></path>
			</svg>
		</div>
		<div @click="selectShapes('ellipse')">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
				<ellipse cx="20" cy="20" rx="14" ry="12" fill="#FFFFFF"  :stroke="modelValue=='ellipse' ? 'rgb(140, 197, 255)' : 'gray'" stroke-width="2"></ellipse>
			</svg>
		</div>
		<div  @click="selectShapes('text')">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
				<text x="10" y="20" font-size="26px" fill="#FFFFFF"  :stroke="modelValue=='text' ? 'rgb(140, 197, 255)' : 'gray'" stroke-width="2">A</text>
			</svg>
		</div>
		<div @click="selectShapes('pen')">
			<svg xmlns="http://www.w3.org/2000/svg" class="library-icon-item svg-icon fill" width="20" height="20" viewBox="0 0 32 32"><path :stroke="modelValue=='pen' ? 'rgb(140, 197, 255)' : 'gray'" stroke-width="2" d="M0 31.68c0.352 0.32 0.704 0.352 1.152 0.16 1.056-0.512 2.112-0.928 3.168-1.408 0.704-0.32 0.8-0.672 0.256-1.216-0.576-0.608-1.184-1.184-1.76-1.792-0.544-0.512-0.864-0.448-1.184 0.256-0.544 1.184-1.088 2.4-1.632 3.584v0.416zM9.088 20.288l0.224 0.224c0.64 0.672 1.312 1.28 1.92 1.952 0.288 0.288 0.416 0.192 0.672-0.032 4.416-4.448 8.864-8.864 13.28-13.28 0.32-0.32 0.256-0.48 0-0.736-0.632-0.574-1.216-1.148-1.777-1.744l-0.015-0.016c-0.32-0.384-0.512-0.32-0.832 0-2.624 2.656-5.28 5.312-7.936 7.968l-5.152 5.152c-0.128 0.128-0.352 0.256-0.384 0.512zM5.792 18.912c-1.024 2.336-2.016 4.576-3.008 6.848-0.128 0.288 0 0.416 0.16 0.576l2.72 2.72c0.224 0.256 0.416 0.288 0.736 0.16-0.256 0.007 1.809-0.917 3.883-1.823l2.389-0.93c0.32-0.128 0.448-0.256 0.128-0.544l-7.008-7.008zM21.728 3.2c0.032 0.224 0.192 0.384 0.32 0.544 2.080 2.080 4.16 4.128 6.24 6.208 0.384 0.416 0.736 0.416 1.12 0.032 0.768-0.8 1.536-1.568 2.336-2.336 0.352-0.352 0.352-0.672 0-1.024-2.112-2.112-4.224-4.192-6.336-6.304-0.32-0.352-0.672-0.352-1.024-0.032-0.8 0.8-1.568 1.6-2.368 2.368-0.152 0.139-0.256 0.327-0.287 0.539l-0.001 0.005zM12.832 24.032c0.384 0.416 0.736 0.832 1.152 1.12 0.288 0.192 0.416-0.192 0.576-0.352 4.352-4.32 8.672-8.672 13.024-12.992 0.416-0.416 0.384-0.608 0-0.992-0.8-0.736-0.8-0.768-1.568 0-4.224 4.256-8.48 8.48-12.704 12.736-0.16 0.128-0.288 0.288-0.48 0.48zM6.784 17.92c0.224 0.384 0.544 0.672 0.864 0.928 0.256 0.16 0.352-0.16 0.48-0.288 4.416-4.384 8.8-8.8 13.216-13.152 0.48-0.48 0.16-0.64-0.128-0.928-0.256-0.256-0.448-0.608-0.896-0.128-4.384 4.416-8.8 8.8-13.184 13.216-0.128 0.096-0.224 0.224-0.352 0.352z"></path></svg>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			modelValue: {
				type: String,
				default: () => ''
			}
		},
		emits: ['update:modelValue'],
		methods: {
			selectShapes(shape) {
				if (this.modelValue == shape) {
					this.$emit('update:modelValue', '')
				} else {
					this.$emit('update:modelValue', shape)
				}
			}
		},
	}
</script>

<style scoped>
	.selected {
		background-color: rgb(140, 197, 255);;
	}
</style>